<template>
  <!-- guanggao_is_full_screen &&  -->
  <view
    class="advert flex-xy-center"
    v-if="guanggaostatus"
    :style="{ zIndex: guanggao_is_over_tabbar ? '99999999999999999' : '999' }"
  >
    <view class="advert_module">
      <!-- v-else-if="guanggaotype == 0"  aspectFill-->
      <!-- 图片广告 -->
      <image
        v-if="isguanggao == 1"
        :src="guanggaopic"
        @tap="gotoGGUrl"
        :mode="guanggao_is_full_screen ? 'aspectFill' : 'widthFix'"
        class="advert_poster"
        :style="{
          width: guanggao_is_full_screen ? '100%' : '85%',
          height: guanggao_is_full_screen ? '100vh' : '65vh',
        }"
        alt=""
        @load="handleImageLoad"
      />

      <!-- v-if="isguanggaovideo == 1" -->
      <!-- 视频广告 -->
      <view class="video-container" v-if="isguanggaovideo == 1">
        <!--   muted  controls  loop object-fit='fill' :style="'height:' + vheight + 'vh'"-->
        <video
          @loadedmetadata="onVideoLoad"
          :src="guanggaovideo"
          id="video"
          ref="videoPlayer"
          :autoplay="isguanggaovideoauto == 1"
          :muted="isguanggaovideoauto == 1"
          loop
          class="advert_video"
          object-fit="fill"
          :style="'height:' + vheight + 'vh'"
        ></video>
        <!-- <view class="play-pause-button" @click="togglePlay">
					{{ isPlaying ? '❚❚' : '▶' }}
				</view> -->
      </view>

      <!-- :src="static_url + '/static/img/pop-close.png'" -->
      <view
        class="advert_close flex-xy-center"
        v-if="guanggao_is_full_screen == 0"
      >
        <image @tap="guanggaoClick" :src="closeIcon" alt="" />
      </view>

      <!-- <view
        class="advert_close2"
        v-if="guanggao_is_full_screen == 1"
        :style="{ top: navHeight + 'px' }"
      >
        <image @tap="guanggaoClick" :src="closeIcon" alt="" />
      </view> -->

      <view
        class="advert_close3"
        v-if="guanggao_is_full_screen == 1 && imgLoadStatus"
        @tap="guanggaoClick"
        :style="{ bottom: guanggao_is_over_tabbar == 1 ? '50rpx' : '190rpx' }"
      >
        <view>跳过</view>
        <view v-if="count > 0">{{ count }}</view>
      </view>
    </view>
  </view>
</template>
<script>
var app = getApp();
export default {
  data() {
    return {
      navHeight: 0,
      static_url: app.globalData.static_url,
      //guanggaostatus: app.globalData.ggStatus,
      guanggaostatus: true,
      isPlaying: false, // 视频是否正在播放
      guanggaotype: 0, //播放类型
      vheight: 25,
      imgLoadStatus: false, //图片广告加载状态
      count: 0, //关闭倒计时
      countTimer: null,
      isPlaying: false,
      guanggaotype: 0,
      //https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250217/07886bdee37fba439d5a88764371b5a5.mp4 //竖屏测试
      //https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250106/5ae005872a7e9d6fefe422d8291feebd.mp4 //横屏测试
    };
  },
  props: {
    guanggaourl: "",
    guanggaopic: "",
    guanggaovideo: "",
    isguanggao: 0,
    isguanggaovideo: 0,
    isguanggaovideoauto: 0,
    closeIcon: "",
    guanggao_full_screen_second: {
      type: Number,
      default: 0,
    },
    guanggao_is_full_screen: {
      type: Number,
      default: 0,
    },
    guanggao_is_over_tabbar: {
      type: Number,
      default: 0,
    },
  },

  mounted: function () {
    this.payvideo();
    // if (this.guanggao_full_screen_second > 0) {
    //   setTimeout(() => {
    //     this.closeAdvert();
    //   }, this.guanggao_full_screen_second * 1000);
    // }

    // #ifndef H5 || APP-PLUS || MP-ALIPAY
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight || 20;

    // 获取胶囊按钮信息（仅微信小程序）
    if (uni.getMenuButtonBoundingClientRect) {
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      this.menuButtonInfo = menuButtonInfo;
      // 计算导航栏高度 = 状态栏高度 + 胶囊按钮高度 + (胶囊按钮上边距 - 状态栏高度) * 2
      this.navHeight =
        menuButtonInfo.bottom + (menuButtonInfo.top - this.statusBarHeight);
    } else {
      // 非微信小程序，使用默认高度
      this.navHeight = this.statusBarHeight + 44;
    }
    // #endif
  },
  methods: {
    handleImageLoad(e) {
      // console.log("图片加载成功", e.detail);
      // e.detail 包含图片实际宽高 { width, height }
      this.imgLoadStatus = true;
      // 启动倒计时
      if (
        this.guanggao_is_full_screen == 1 &&
        this.guanggao_full_screen_second > 0
      ) {
        this.count = this.guanggao_full_screen_second;
        this.startCountdown();
      }
    },

    //定时关闭广告
    startCountdown() {
      this.countTimer = setInterval(() => {
        if (this.count > 0) {
          this.count--;
        }
        if (this.count == 0) {
          this.guanggaoClick();
        }
      }, 1000);
    },
    clearCountdown() {
      if (this.countTimer) {
        clearInterval(this.countTimer);
        this.countTimer = null;
      }
    },
    closeAdvert() {
      this.clearCountdown();
      this.guanggaostatus = false;
      app.globalData.ggStatus = false;
    },

    gotoGGUrl() {
      app.goto(this.guanggaourl);
      this.$emit("closeReceive");
    },

    guanggaoClick() {
      this.clearCountdown();
      this.guanggaostatus = false;
      app.globalData.ggStatus = false;
      this.$emit("closeReceive");
    },
    payvideo() {
      uni.createVideoContext("video").play();
    },
    // togglePlay() {
    // 	const video = this.$refs.videoPlayer;
    // 	if (video.paused) {
    // 		console.log('play');
    // 		video.play();
    // 	} else {
    // 		console.log('pause');
    // 		video.pause();
    // 	}
    // },
    onVideoLoad(event) {
      const video = event.detail;
      // console.log("videoWidth: ", video.width);
      // console.log("videoheight: ", video.height);
      if (video.height > video.width) {
        this.vheight = 65;
        // this.vheight = video.height;
      } else {
        // this.vheight = 25;
      }
      if (this.guanggao_is_full_screen == 1) {
        this.vheight = 100;
      }
    },
  },
};
</script>
<style>
.advert {
  position: fixed;
  height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 9999999;
  background: rgba(0, 0, 0, 0.7);
}

.advert_module {
  position: relative;
  width: 100%;
}

.advert_poster {
  position: relative;
  width: 85%;
  display: block;
  margin: 0 auto;
}

.advert_video {
  position: relative;
  width: 100%;
  display: block;
  margin: 0 auto;
}

.play-pause-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
}

.advert_close {
  position: relative;
  width: 60rpx;
  height: 60rpx;
  margin: 0 auto;
  border-radius: 100rpx;
  margin-top: 20rpx;
}

.advert_close2 {
  position: fixed;
  right: 26rpx;
  top: 26rpx;
  width: 64rpx;
  height: 64rpx;
  border-radius: 100rpx;
}

.advert_close2 image {
  width: 100%;
  height: 100%;
}

.advert_close image {
  width: 100%;
  height: 100%;
}

.advert_close3 {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  right: 26rpx;
  bottom: 150rpx;
  padding: 4rpx 12rpx;
  /* width: 64rpx;
  height: 64rpx; */
  border-radius: 100rpx;
  border: 2rpx solid #fff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  /* letter-spacing: 5rpx; */
}
</style>
